import React, { useState } from 'react';
import { 
  Card, 
  Typography, 
  Form, 
  Input, 
  Button, 
  Switch, 
  Message,
  Divider,
  Select
} from '@arco-design/web-react';
import { IconSettings, IconSave } from '@arco-design/web-react/icon';
import { useTranslation } from 'react-i18next';
import './Settings.css';

const { Title } = Typography;
const Option = Select.Option;

const Settings: React.FC = () => {
  const { t } = useTranslation();
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const handleSubmit = (values: any) => {
    setLoading(true);
    // 模拟保存设置
    setTimeout(() => {
      console.log('保存设置:', values);
      setLoading(false);
      Message.success(t('settings.saveSuccess'));
    }, 1000);
  };

  return (
    <div className="settings-page">
      <div className="page-header">
        <Title heading={3}>{t('settings.title')}</Title>
      </div>

      <div className="settings-content">
        <Card className="settings-card">
          <Title heading={5} style={{ marginBottom: 20 }}>
            <IconSettings style={{ marginRight: 8 }} />
            {t('settings.generalSettings')}
          </Title>
          
          <Form 
            form={form} 
            onSubmit={handleSubmit} 
            initialValues={{
              siteName: 'Bug Seeker 管理后台',
              siteDescription: '现代化的管理后台系统',
              language: 'zh-CN',
              theme: 'light',
              notifications: true
            }}
            layout="vertical"
          >
            <Form.Item 
              field="siteName" 
              label={t('settings.siteName')}
              rules={[{ required: true, message: t('settings.siteNameRequired') }]}
            >
              <Input placeholder={t('settings.siteNamePlaceholder')} />
            </Form.Item>
            
            <Form.Item 
              field="siteDescription" 
              label={t('settings.siteDescription')}
            >
              <Input.TextArea 
                placeholder={t('settings.siteDescriptionPlaceholder')} 
                autoSize={{ minRows: 3, maxRows: 5 }} 
              />
            </Form.Item>
            
            <Divider style={{ margin: '32px 0' }} />
            
            <Title heading={5} style={{ marginBottom: 20 }}>
              {t('settings.displaySettings')}
            </Title>
            
            <Form.Item 
              field="language" 
              label={t('settings.language')}
            >
              <Select placeholder={t('settings.languagePlaceholder')}>
                <Option value="zh-CN">{t('settings.chinese')}</Option>
                <Option value="en-US">{t('settings.english')}</Option>
              </Select>
            </Form.Item>
            
            <Form.Item 
              field="theme" 
              label={t('settings.theme')}
              triggerPropName="value"
            >
              <Select placeholder={t('settings.themePlaceholder')}>
                <Option value="light">{t('settings.lightTheme')}</Option>
                <Option value="dark">{t('settings.darkTheme')}</Option>
              </Select>
            </Form.Item>
            
            <Form.Item 
              field="notifications" 
              label={t('settings.notifications')}
              triggerPropName="checked"
            >
              <Switch />
            </Form.Item>
            
            <Form.Item>
              <Button 
                type="primary" 
                icon={<IconSave />} 
                htmlType="submit" 
                loading={loading}
              >
                {t('settings.saveSettings')}
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    </div>
  );
};

export default Settings;